<template>
	<view class="diy-community">
		<block v-if="value.style == 1">
			<view class="community-style1" :style="{backgroundColor: value.backgroundColor}">
				<view class="community-style1-left" :style="{color: value.textColor}">
					<text class="iconfont iconmendian1"></text>
					<text class="community-address">{{community ? community : '请选择社区自提点'}}</text>
				</view>
				<view class="community-style1-right" :style="{color: value.textColor}" @click="toChange">
					<text>点击切换</text>
					<text class="iconfont iconright"></text>
				</view>
			</view>
		</block>

		<block v-if="value.style == 2">
			<view class="community-style1 community-style2" :style="{backgroundColor: value.backgroundColor}">
				<view class="community-style1-left" :style="{color: value.textColor}">
					<text class="iconfont iconmendian1"></text>
					<text class="community-address">{{community ? community : '请选择社区自提点'}}</text>
				</view>
				<view class="community-style1-right" :style="{color: value.textColor}" @click="toChange">
					<text>点击切换</text>
					<text class="iconfont iconright"></text>
				</view>
			</view>
		</block>

		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	export default {
		name: 'diy-community',
		props: {
			value: {
				type: Object
			}
		},
		mixins: [globalConfig],
		data() {
			return {
				token: '',
				community: '',
				latitude: null,
				longitude: null
			};
		},
		created() {
			this.$store.commit('setDiyCommunity', 1);
			this.token = uni.getStorageSync('token');
			uni.$on('getMemberCommunity',()=>{
				this.getAddress()
			})
		},
		computed: {
			tokenStore() {
				this.getAddress();
				return this.$store.state.tokenStore;
			},
			diyCommunity() {
				this.getAddress();
				return this.$store.state.diyCommunity;
			}
		},
		watch: {
			tokenStore(val, old) {
				this.getAddress();
			}
		},
		methods: {
			getAddress() {
				this.$api.sendRequest({
					url: '/api/community/getMemberCommunity',
					success: res => {
						if (res.code >= 0) {
							this.community = res.data.community;
							this.latitude = res.data.latitude;
							this.longitude = res.data.longitude;

							this.$store.commit('setDiyCommunity', 0);
						} else {
							this.community = '';
							this.$store.commit('setDiyCommunity', 0);
						}
					},
					fail: res => {
						this.$util.showToast({
							title: res.message
						})
					}
				})
			},
			toChange() {
				if (this.tokenStore) {
					if (this.latitude && this.longitude) {
						this.$util.redirectTo('/otherpages/community/community_choose/community_choose', {
							lat_old: this.latitude,
							log_old: this.longitude,
							name: this.community
						});
					} else {
						this.$util.redirectTo('/otherpages/community/community_choose/community_choose');
					}
					this.$store.commit('setDiyCommunity', 0);
				} else {
					this.$refs.login.open('/pages/index/index/index');
				}
			}
		}
	};
</script>

<style lang="scss">
	.community-style1 {
		width: 100%;
		border-radius: 10rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.community-style1-left {
			display: flex;
			align-items: center;
			width: calc(100% - 160rpx);

			.iconfont {
				font-size: 32rpx;
				line-height: 1;
				margin-right: 10rpx;
			}

			.community-address {
				width: calc(100% - 36rpx);
				font-size: 26rpx;
				line-height: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.community-style1-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 24rpx;
			width: 160rpx;
			line-height: 1;

			.iconfont {
				font-size: 28rpx;
			}
		}
	}

	.community-style2 {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, .3);
	}
</style>